<template>
    <wm-asn-list-std ref="asnListRef">
      <template v-slot:btn="props">
        <q-btn @click="onImportEl" color="primary" icon="fas fa-file-import" label="EL导入"
            v-if="fx.hasModifyRight('Wms.Work.Asn.Edit')" />
        <q-btn @click="onShortReceive(props.data.selectedItems)" color="primary" icon="fas fa-file-import" label="短收"
          v-if="fx.hasModifyRight('Wms.Work.Asn.ShortReceive')" :disable="props.data.selectedItems.length !== 1" />
      </template>
      <template v-slot:dlg="">
        <q-dialog persistent position="top" transition-hide="none" transition-show="none" v-model="showDlg">
          <q-card style="top: 40px; max-width:1000px; width:1000px">
            <q-card-section class="q-pa-sm">
              <div class="text-h6">EL导入<a @click="fx.nw.downloadFile('/project/mhlbc/res/download/mhl-el-asn-import-template.xlsx','',false)"
                  class="text-body2" href="javascript:void(0)">导入模板下载</a></div>
            </q-card-section>
            <q-separator />
            <!--错误提示-->
            <q-banner class="text-white bg-red q-my-xs" dense inline-actions v-if="serverErrorMessage">
              {{ serverErrorMessage }}
              <template v-slot:action>
                <q-btn @click="serverErrorMessage = ''" dense flat icon="close" size="sm" />
              </template>
            </q-banner>

            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
                  <div class="col-4 text-right searchbar-label">仓库</div>
                  <div class="col-8">
                    <simple-filter-select :options="$d.whDropdownList" :use-filter="false"
                        option-label="whName" option-value="whId" v-model="$d.whId" @update:model-value="onWhChanged" />
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
                  <div class="col-4 text-right searchbar-label">储区</div>
                  <div class="col-8">
                    <simple-filter-select v-model="$d.zoneId" :options="$d.zoneDropdownList" :use-filter="false"
                        :auto-select-single-option="false" option-label="zoneName"
                        option-value="zoneId" />
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
                  <div class="col-4 text-right searchbar-label">货主</div>
                  <div class="col-8">
                    <simple-filter-select :options="$d.storerDropdownList" option-label="abbrName" option-value="mfId"
                        v-model="$d.storerId" :auto-select-single-option="false" />
                  </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
                  <div class="col-4 text-right searchbar-label">进货方式</div>
                  <div class="col-8">
                    <simple-filter-select :auto-select-single-option="false"
                        :options="$d.docTypeDropdownList" :use-filter="false" option-label="codeName1" option-value="codeValue"
                        v-model="$d.docType" />
                  </div>
                </div>
                <div class="col-12 row q-col-gutter-sm">
                  <input ref="asnListExcelFileInput" type="file" />
                </div>
              </div>
            </div>

            <q-separator class="separator" />
            <q-card-actions align="right">
              <q-btn @click="importAsnEL" color="primary" label="确定" />
              <q-btn color="primary" label="取消" outline unelevated v-close-popup />
            </q-card-actions>
          </q-card>
        </q-dialog>
      </template>

    </wm-asn-list-std>
</template>
<script setup lang="ts">

import {reactive, ref} from 'vue'
import {WmWhLite} from '@njt/wms/defs/basic/wh'
import {WmZoneLite} from '@njt/wms/defs/basic/zone'
import {CodeLineForDropdown, MfLite} from '@njt/foundation/helper/dropdownlist.d'
import _ from 'lodash'

let showDlg = ref(false)
// 错误提示
let serverErrorMessage = ref('')
let asnListExcelFileInput = ref()
let asnListRef = ref<any>()

const $d = reactive({
  // 仓库下拉
  whDropdownList: [] as WmWhLite[],
  // 储区下拉
  zoneDropdownList: [] as WmZoneLite[],
  //进货方式下拉
  docTypeDropdownList: [] as CodeLineForDropdown[],
  // 货主
  storerDropdownList: [] as MfLite[],
  zoneId: null as number | null | undefined,
  whId: null as number | null | undefined,
  storerId: null as number | null | undefined,
  docType: null as string | null | undefined,
})

let importAsnExcelState = ref(false)
// EL导入确定
const importAsnEL = function () {
  importAsnExcelState.value = true
  let formData = new window.FormData()
  formData.append('whId', String($d.whId))
  formData.append('zoneId', String($d.zoneId))
  formData.append('storerId', String($d.storerId))
  formData.append('docType', $d.docType)
  formData.append('File', asnListExcelFileInput.value.files[0])
  $f.axios
    .post('/project/mhlbc/work/asn/import-el-asn', formData)
    .then(() => {
      showDlg.value = false
      $f.ui.showNotifySucceeded('导入成功')
      asnListRef.value.loadListData(2)
    })
    .catch((err) => {
      if (err.response?.data?.errorList?.length) {
        showDlg.value = false
        $f.ui.showErrorListDlg(err.response.data)
      } else {
        serverErrorMessage.value = $f.getAxiosErrMsg(err)
      }
    })
    .finally(() => {
      importAsnExcelState.value = false
    })
}

// 仓库变更
const onWhChanged = function (value: number | null) {
  $d.zoneId = null
  void $f.lst.getZoneSimpleList(value)
      .then((resp) => {
        $d.zoneDropdownList = resp.zones
      })
}

const onImportEl = () => {
  showDlg.value = true
  serverErrorMessage.value = ''

  $d.whId = _.find($d.whDropdownList, (o) => {
    return o.whName === 'L2588'
  })?.whId

  $d.storerId = _.find($d.storerDropdownList, (o) => {
    return o.abbrName === 'EL'
  })?.mfId

  $d.zoneId = _.find($d.zoneDropdownList, (o) => {
    return o.zoneName === 'MH2'
  })?.zoneId

  $d.docType = _.find($d.docTypeDropdownList, (o) => {
    return o.codeName1 === '一般方式'
  })?.codeValue
}

const onShortReceive = function (selectedItems: Record<any, any>[]) {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确认发送通知吗?',
    icon: 'Question',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/project/mhlbc/work/asn/short-receive-by-asn/', _.map(selectedItems, 'asnId'))
        .then(() => {
          $f.ui.closeMsgBox()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '发送失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}

// 仓库下拉
void $f.lst.getWmWhSimpleList()
  .then((resp) => {
    $d.whDropdownList = resp
  })
// 储区全量
void $f.lst.getZoneSimpleList(null)
  .then((resp) => {
    $d.zoneDropdownList = resp.zones
  })
//获取货主下拉数据源
void $f.lst.getMfSimpleList({isStorer: true})
  .then((resp) => {
    $d.storerDropdownList = resp.mfLiteList
  })
// 进货方式
void $f.lst.getCodeForDropdown('AsnDocType')
  .then((resp) => {
    $d.docTypeDropdownList = resp
  })

const fx = $f
</script>
